<template>
	<view class="container">
		<u-grid :col="3" :border="true" class="content-view">
			<u-grid-item v-for="(item, index) in list" :key="index" @click="itemClick(item, index)" class="item"
				:customStyle="style">
				<u-image :width="width+'px'" :height="width+'px'" :src="item.resURL"></u-image>
				<u-checkbox v-show="showAction"  shape="circle" class="checkbox" v-model="item.check"></u-checkbox >
			</u-grid-item>
		</u-grid>
		<view v-if="showAction" class="action-view">
			<text @click="addClick">添加</text>
			<text @click="cancelClick">取消</text>	
		</view>
	</view>
</template>

<script>
	import { getChildrenPhoto } from '@/api/album.js'
	import pageMixin from '@/mixins/page.js'
	export default {
		mixins: [pageMixin],
		data() {
			return {
				showAction: false,
				content: [{
						text: '删除'
					},
					{
						text: '添加'
					},
				],
				
				style: {
					'padding': '0 0',
					'border-width': '50px',
					'border': '5 solid #007AFF'
				},
				
				width: 0,
			}
		},
		onLoad(options) {
			console.log(options);
			this.albumId = options.albumId;
			this.init();
			this.getList(this.page)
		},
		onNavigationBarButtonTap(event) {
		    this.showAction = true
		},
		methods: {
			refresh() {
				this.page = -1;
				this.getList(this.page)
			},
			
			init() {
				let that = this;
				uni.getSystemInfo({
					success(res) {
						that.width = res.windowWidth/3;
					}
				})
			},
			itemClick(item, index) {
				if (this.showAction) {
					item.check = !item.check;
					this.list.splice(index, 1, item);
				} else {
					let arr = this.list.map((item) => {
						return item.resURL
					})
					
					// const urls = [item.resURL];
					uni.previewImage({
						current: index,
						urls: arr,
					});
				}
			},
			addClick() {
				let resURL = '';
				for (let index = this.list.length - 1; index >= 0; index--) {
					let item = this.list[index];
					if (item.check) {
						resURL += `,${item.resURL}`;
					}
				}
				if (resURL.length > 0) {
					console.log(resURL)
					this.$u.route({
						url: '/pages_base/feed/album-template',
						type: 'redirectTo',
						params: {
							resURL: resURL.substring(1),
						}
					})
				}
			},
			cancelClick() {
				this.showAction = false;
			},
			
			getList(page) {
				const params = {
					albumId: this.albumId,
					pageNum: page + 1,
					pageSize: 18,
				}
				getChildrenPhoto(params).then(res => {
					console.log(res);
					this.setData(res);
				})
			},
			
			onReachBottom() {
				this.loadMore();
			},
		}
	}
</script>

<style lang="scss">
	.container{

	}

	.content-view{
		margin-bottom: 100rpx;
	}
	
	.action-view{
		position: fixed;
		height: 100rpx;
		background-color: #FFFFFF;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		box-shadow: 0px -1px 10px 0px rgba(138, 138, 138, 0.2);
	}

	.item{
		background-color: #007AFF;
		.checkbox{
			position: absolute;
			bottom: 30rpx;
			right: 0;
		}
	}
	
	.fix-view{
		position: absolute;
		bottom: 180rpx;
		width: 100%;
	}
	

</style>
